<!--Template-driven forms-->
<div [hidden]="submitted" class="container">
    <h1>Hero Form</h1>
    <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
        <!--<div>
            {{diagnostic}}
        </div>-->

        <div class="form-group">
            <label for="name">Name</label>
            <!--#name is template reference variables. A template reference variable is often a reference to a DOM element within a template. The type is HTMLFormElement.
             #name="ngModel" is a reference to an Angular NgForm directive with the ability to track the value and validity of every control in the form.
            .-->
            <input type="text" class="form-control" id="name" name="name" [(ngModel)]="model.name" #name="ngModel" required>
            <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
                Name is required
            </div>
        </div>

        <div class="form-group">
            <label for="alterEgo">Alter Ego</label>
            <input type="text" class="form-control" id="alterEgo" name="alterEgo" [(ngModel)]="model.alterEgo">
        </div>

        <div class="form-group">
            <label for="power">Hero Power</label>
            <!--IMPORTANT: USE ngModelChange EVENT INSTEAD OF change EVENT TO GET THE SELECTED OBJECT VIA THE $event PARAMETER.-->
            <!--USE ngValue ATTRIBUTE INSTEAD OF value ATTRIBUTE BECAUSE THE value ATTRIBUTE ONLY CAN CONTAIN PRIME TYPE DATA.-->
            <!--IF YOU ARE WORKING ON SOME PRIME TYPES, LIKE string, number THE change EVENT AND value ATTRIBUTE WORK WELL.-->
            <select [(ngModel)]="model.power" (ngModelChange)="onPowerChange($event)" class="form-control" id="power" name="power" required>
                <option *ngFor="let power of powers" [ngValue]="power">{{power.name}}</option>
            </select>
        </div>

        <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
        <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
        <!--IMPORTANT: IF YOU CALL heroForm.reset() IN THE HTML WILL RESET ALL THE INPUT VALUES TO NULL. THAT MEANS THE model ALL PROPERTIE VALUES WILL BE NULL.-->
        <!--WHATEVER YOU DO TO THE this.model VARIABLE IN ANGULAR FUNCTION. ALL THE PROPERTY VALUES YOU ASSIGNED WILL BE OVERRIDED SILENTLY. PLEASE REMEMBER THE power PROPERTY IS AN OBJECT.-->
        <!--WHY WE USE heroForm.reset() BECAUSE WE WANT TO RESET THE form pristine PROPERTY SOMETIMES TO AVOID THE ERROR MESSAGE DISPLAY AFTER THE BUTTON CLICKS.-->
        <!--DO IT WISELY BASED ON YOUR OWN JUDGEMENT.-->
    </form>
</div>

<div>
    {{model | json}}
</div>

<div [hidden]="!submitted" class="container">
    <h2>You submitted the following:</h2>
    <div class="row">
        <div class="col-xs-3">Name</div>
        <div class="col-xs-9  pull-left">
            <span [innerHTML]="model.name"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">Alter Ego</div>
        <div class="col-xs-9  pull-left">{{model.alterEgo}}</div>
    </div>
    <!--IF WE USE heroForm.reset(), model.power VALUE WILL BE NULL.  -->
    <!--model.power.name INTERPOLATION WILL CAUSE NULL EXCEPTION. THAT'S WHY WE ARE USING model.power?.name.-->
    <div class="row">
        <div class="col-xs-3">Power</div>
        <div class="col-xs-9  pull-left">{{model.power?.name}}</div>
    </div>
    <br>
    <button class="btn btn-primary" (click)="submitted=false">Edit</button>
</div>